import { atom, atomFamily, selector } from 'recoil';

import settings from '@/config/settings';

import { Theme } from '@/types/settings.d';
import { IRouter } from '@/types/router.d';

export interface StateType {
  /* 以下是针对所有 Layout 扩展字段 */
  // 左侧展开收起
  collapsed: boolean;
  // 头部固定开启
  fixedHeader: boolean;
  // 模板主题
  theme: Theme;
  /* 以下是针对 UniversalLayout 扩展字段 */
  // tab菜单开启
  tabNavEnable: boolean;
  // 头部tab导航列表
  headTabNavList: IRouter[];
  // 显示设置
  showSettings: boolean;
}

const initialState: StateType = {
  collapsed: false,
  fixedHeader: settings.headFixed,
  theme: settings.theme,
  tabNavEnable: settings.tabNavEnable,
  headTabNavList: [],
  showSettings: false,
};

export const globalState = atom({
  key: 'globalState',
  default: initialState,
});

const crateSelector = (key: string) =>
  selector({
    key,
    get: ({ get }) => get(globalState)[key],
  });

export const collapsedState = crateSelector('collapsed');
export const fixedHeaderState = crateSelector('fixedHeader');
export const themeState = crateSelector('theme');
export const tabNavEnableState = crateSelector('tabNavEnable');
export const headTabNavListState = crateSelector('headTabNavList');
export const showSettingsState = crateSelector('showSettings');
